<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>角色编辑</title> 
#@resources()
</head>	
<body>
	<div class="layui-container">
		<form class="layui-form" action="">
			<input type="hidden" name="role.id" value="#(role.id)" /> <!-- id -->
			<div class="layui-form-item">
				<label class="layui-form-label">角色名</label>
				<div class="layui-input-block">
					<input type="text" name="role.role_name"  required lay-verify="required"
						placeholder="请输入角色名" value="#(role.role_name)" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">角色描述</label>
				<div class="layui-input-block">
					<input type="text" name="role.role_desc" required lay-verify="required"
						placeholder="请输入角色描述" value="#(role.role_desc)" autocomplete="off" class="layui-input">
				</div>
			</div>
			
		    <div class="edit-btns">
				<button class="layui-btn layui-btn-sm" lay-submit lay-filter="save">保存</button>
				<button class="layui-btn layui-btn-primary layui-btn-sm" @event="close" >取消</button> 
			</div>
		</form>
	</div>
	<script type="text/javascript">
		layui.use([ 'layer','form' ], function() {
			var layer = layui.layer;
			var form = layui.form;
			
			form.on('submit(save)', function(data){
				  //后台保存数据
				  $.post(ctx +"/role/save", data.field, function(ret){
					  if(ret.state == "ok"){
						  parent.events.search();//调用父页面的查询表格方法刷新数据
					      events.close();
					  }else{
						  layer.alert(ret.msg || "服务器异常")
					  }
				  })
			      return false;//阻止表单跳转
			});
			
			var events = {
			    close: function(){
			    	var index = parent.layer.getFrameIndex(window.name);  
			    	parent.layer.close(index); 
			    }
			};
			
			$('.layui-btn').on('click', function(){
			    var type = $(this).attr('@event');
			    events[type] ? events[type].call(this) : '';
			});
		});
	</script>
</body>
</html>